import { Button, Form, Input, message, Modal, Select } from "antd";
import * as React from "react";
import { connect } from "react-redux";
import { ResBodyCode } from "../../../../../common/config/http";
import {
  formItemLayout,
  formSubmit
} from "../../../../../common/config/repeat";
import {
  IForm,
  mapDispatchToProps,
  mapStateToProps,
  TProps
} from "./interface";
const { Item } = Form;
const { Option } = Select;
const { success } = Modal;

const View: React.FC<TProps> = props => {
  const { form, formInfo, hide, submit, getTableDatasource, filter } = props;
  const echo = formInfo.echo_edit;

  const { getFieldDecorator } = form;

  function handleSubmit(e: React.FormEvent) {
    formSubmit(e, form, (values: IForm) => {
      // console.log("values", values);
      // console.log(values.expiryTime.format("YYYY-MM-DD HH:mm:ss"));
      // console.log(values.expiryTime.format("X")); // 10位的时间戳,可以就是我想要的
      if (!echo) {
        message.error("数据不完整");
        message.error("可能是网络不稳定造成,请关闭弹窗重新修改");
        return;
      }
      const data = { ...values, id: echo.id };
      // 发送请求
      submit(data, res => {
        console.log("res", res);
        if (res.code === ResBodyCode.OK) {
          message.success(res.msg);
          // 显示成功的提示
          showConfirm();
          // 刷新列表
          getTableDatasource(filter);
        } else {
          message.error(res.msg);
        }
      });
    });
  }

  function showConfirm() {
    success({
      title: "Success",
      content: "地区修改成功",
      onOk() {
        hide(formInfo);
      }
    });
  }

  const formBody = (
    <Form {...formItemLayout} onSubmit={handleSubmit}>
      <Item label="名称">
        {getFieldDecorator("name", {
          rules: [{ required: true, message: "必填项" }],
          initialValue: echo && echo.name
        })(<Input />)}
      </Item>
    </Form>
  );

  return (
    <Modal
      title="修改地区"
      destroyOnClose
      onCancel={() => hide(formInfo)}
      okText="提交"
      onOk={e => {
        handleSubmit(e);
      }}
      visible={formInfo.visible_edit}
    >
      <div style={{ marginTop: "10px" }}>{formBody}</div>
    </Modal>
  );
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create({ name: "修改地区" })(View));
